import React, { useEffect, useRef, useState } from 'react'
import { PageHeader, Steps, Button, Form, Input, Select, message,notification  } from 'antd'
import style from './News.module.css'
import axios from 'axios';
import NewsEditor from '../../../components/news-manage/NewsEditor';
const { Option } = Select
const { Step } = Steps;
function NewsAdd(props) {
    const NewsForm = useRef(null)
    const [current, setcurrent] = useState(0)
    const [categoryList, setcategoryList] = useState([])
    const [formInfo, setformInfo] = useState({})
    const [content, setContent] = useState("")
    const handleNext = () => {
        if (current === 0) {
            NewsForm.current.validateFields().then(res => {
                setformInfo(res)
            setcurrent(current + 1)

            }).catch(err => {
                console.log(err);
            })
        } else {
            console.log(formInfo,content);
            if (content==='' || content.trim() ===`<p></p>`){
                 message.error("新闻内容不能为空")
            }else{
                 setcurrent(current + 1)
            }
        }

    }
    const handlePrevious = () => {
        setcurrent(current - 1)
    }
    useEffect(() => {
        axios.get('/categories').then(res => {
            setcategoryList(res.data)
        })
    }, [])
    const User = JSON.parse(localStorage.getItem("token"))

    const handleSave=(auditState)=>{
        axios.post("/news",{
            ...formInfo,
            "author": User.username,
            // "categoryId": 1,
            "region": User.region ? User.region :'全球',
            "roleId": User.roleId,
            "auditState": auditState,
            "publishState": 0,
            "content": content,
            "createTime": Date.now(),
            "star": 0,
            "view": 0,
        }).then(res=>{
            const args = {
                message: 'Notification Title',
                description: `你可以到${auditState===0? "草稿箱": '审核列表'}中查看你的新闻` ,
                duration: 3,
              };
              notification.open(args);
            props.history.push(auditState===0? "/news-manage/draft":'/audit-manage/list')


        })
    }
    return (
        <div>
            <PageHeader
                className='site-page-header'
                title="撰写新闻"
                subTitle="this is a subtitle"
            />
            <Steps current={current}>
                <Step title="基本信息" description="新闻标题，新闻分类" />
                <Step title="新闻内容" description="新闻主体内容" />
                <Step title="新闻提交" description="保存草稿或者提交审核" />
            </Steps>
            <div style={{ margin: 40 }}>
                <div className={current === 0 ? '' : style.active}>
                    <Form
                        name="basic"
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={{ remember: true }}
                        autoComplete="off"
                        ref={NewsForm}
                    >
                        <Form.Item
                            label="新闻标题"
                            name="title"
                            rules={[{ required: true, message: 'Please input your username!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="新闻分类"
                            name="categoryId"
                            rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                            <Select>
                                {
                                    categoryList.map((item) => {
                                        return <Option value={item.value} key={item.id} ></Option>

                                    })
                                }
                            </Select>
                        </Form.Item>
                    </Form>
                </div>
                <div className={current === 1 ? '' : style.active}>
                    <NewsEditor getContent={(value)=>{
                        setContent(value)
                    }}/>
                </div>
                <div className={current === 2 ? '' : style.active}>
                    
                </div>
            </div>
            <div style={{ margin: 30 }}>
                {
                    current === 2 && <span>
                        <Button type='primary' onClick={()=>handleSave(0)}>保存草稿箱</Button>
                        <Button onClick={()=>handleSave(1)} >提交审核</Button>
                    </span> 
                }
                {
                    current < 2 && <Button type='primary' onClick={handleNext}>下一步</Button>
                }
                {

                    current > 0 && <Button onClick={handlePrevious}>上一步</Button>
                }
            </div>
        </div>
    )
}

export default NewsAdd
